$user-message: (
);

@include b(user-message) {
  @include set-component-css-var('user-message', $user-message);

  width: 100%;
  height: 100%;

  @include flex(row, center, center);

  @include e(image){
    width: 28px;
    height: 28px;
    cursor: pointer;
  }

  @include e(badge){
    .el-badge__content{
      top: 4px;
      right: calc(7px + var(--el-badge-size)/ 2);
      border-width: 0;
    }
  }
  
}

@include b(user-message-popover) {
  width: 500px !important;
  height: 500px !important;
  @include set-component-css-var('user-message', $user-message);
  
  &.el-popover{
    padding-top: 2px;
    padding-bottom: 0;
  }
}

@include b(user-message-popover-content-box) {
  position: relative;
  height: 100%;  
}

@include b(user-message-popover-icons){
  position: absolute;
  top: 10px;
  right: 0;

  @include b(user-message-popover-icons-read){
    cursor: pointer;

    &:hover{
      color: getCssVar(color,primary);
    }
  }

}


@include b(user-message-popover-content) {
  height: 100%;

  > .el-tabs__content{
    height: calc(100% - 55px);

    >.el-tab-pane{
      height: 100%;
      overflow: auto;
    }
  }


}


@include b(user-message-notice) {
  padding: getCssVar(spacing, tight);
  padding-right: getCssVar(spacing, base, loose);

  .el-notification__group{
    max-width: 100%;
    margin: 0;
    cursor: pointer;
  }

}